<template>
	<view class="quality-query-page">
		<view class="card">
			<view class="card-title">软水查询</view>
			<view class="card-content">
				<view class="form-item" v-for="(item, index) in formItems" :key="index">
					<view class="form-item-label">{{ item.label }}</view>
					<view class="form-item-value" @click.stop="showAction(item, index)">
						<view class="form-item-value-placeholder" :class="{ active: item.selectLabel }">{{ item.selectLabel || item.placeholder }}</view>
						<image class="icon" :class="{ up: currentActionIndex === index }" src="/static/down.png" mode="widthFix"></image>
					</view>
				</view>
			</view>

			<view class="query-button" @click="goToSolution">查询</view>

		</view>
	</view>
</template>

<script>
	import { setMatchResultList } from '/common/share.js'
	import request from '/common/request.js'
	let allDatas = []
	// let matchResult = []
	
	export default {
		onShareAppMessage() {
					return {
						title: '软水查询',
						imageUrl: "",
						// path: ""
					}
				},
		data() {
			return {
				currentActionIndex: -1,
				currentPeopleCode: null,
				currentHardCode: null,
				currentProduct: null,
				formItems: [
					{ key: 'currentPeopleCode', selectLabel: '', value: -1, placeholder: '请选择人口数量', label: '人口数量：', options: [] },
					{ key: 'currentHardCode', selectLabel: '', value: -1, placeholder: '请选择水质硬度', label: '水质硬度：', options: [] },
					{ key: 'currentProduct', selectLabel: '', value: -1, placeholder: '请选择产品系列', label: '产品系列：', options: [] },
				],
				peopleList: [],
				hardnessList: [],
				productList: []
			}
		},
		onReady(options) {
			console.log('ready')
			this.querySoftWater()
		},
		methods: {
			querySoftWater() {
				request({
					url: '/water/softener',
				}).then(res => {
					console.log(res)
					if (!res) return
					allDatas = res
					const peopleList = []
					const hardnessList = []
					const productList = []
					peopleList.keys = {}
					hardnessList.keys = {}
					productList.keys = {}
					
					res.forEach(item => {
						const { hardness_calc, hardness_range, population, range_value, product_model, product_series } = item
						if (!hardnessList.keys[hardness_calc]) {
							hardnessList.push({ value: hardness_calc, label: hardness_range })
						}
						hardnessList.keys[hardness_calc] = hardness_range

						if (!peopleList.keys[population]) {
							peopleList.push({ value: population, label: range_value })
						}
						peopleList.keys[population] = range_value

						// if (!productList.keys[product_model]) {
						// 	productList.push({ value: product_model, label: product_series })
						// }
						// productList.keys[product_model] = product_series
						if (!productList.keys[product_series]) {
							productList.push({ value: product_series, label: product_series })
						}
						productList.keys[product_series] = product_series
					})

					console.log(peopleList)
					console.log(hardnessList)
					console.log(productList)
					this.peopleList = peopleList
					this.hardnessList = hardnessList
					this.productList = productList
					this.$set(this.formItems[0], 'options', peopleList)
					this.$set(this.formItems[1], 'options', hardnessList)
					this.$set(this.formItems[2], 'options', productList)
				})
			},
			goToSolution() {
				const { currentPeopleCode, currentHardCode, currentProduct } = this
				console.log(currentPeopleCode)
				console.log(currentHardCode)
				console.log(currentProduct)
				if (!currentPeopleCode || !currentHardCode || !currentProduct) {
					return uni.showToast({
						title: '不能为空',
						icon: 'none'
					})
				}
				const result = allDatas.filter(e => {
					return e.population === currentPeopleCode && e.hardness_calc === currentHardCode && e.product_series === currentProduct
				})
				console.log("匹配结果： ", result)
				setMatchResultList(result)
				// matchResult = result
				uni.navigateTo({
					url: '/pages/solution/solution'
				})
			},
			showAction(item, index) {
				this.currentActionIndex = index
				const { options, key } = item
				uni.showActionSheet({
					itemList: options.map(e => e.label),
					success: (res) => {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						item.selectLabel =  options[res.tapIndex].label
						item.value =  options[res.tapIndex].value
						console.log(item.label)
						console.log(item.value)
						this[key] = item.value
					},
					fail: function (res) {
						console.log(res.errMsg);
					},
					complete: () => {
						this.currentActionIndex = null
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		// min-height: 100vh;
		height: 100%;
		// background-color: red;
	}
	.quality-query-page {
		background-color: #fff;
		padding: 40rpx 0;
		background: url("/static/szbg.png");
		background-size: 100% auto;
		background-position: 0 -260rpx;
		background-repeat: no-repeat;
	}

	.card {
		margin: 20rpx 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 10px;
		border: 1px solid #eee;
		background-color: #fff;
		box-shadow: 1rpx 1rpx 2rpx #eee;
	}

	.card-title {
		color: #04158c;
		font-size: 20px;
		text-align: center;
		letter-spacing: 1px;
		font-weight: bold;
		padding-top: 40rpx;
		padding-bottom: 80rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// padding: 30rpx 0;
		
		// margin-bottom: 30rpx;
		border-bottom: 1px solid #f2f2f2;

		.form-item-label {
			padding-left: 10rpx;
			color: #000;
			font-weight: bold;
			font-size: 14px;
		}
		.form-item-value {
			flex: 1;
			display: inline-flex;
			padding-left: 40rpx;
			align-items: center;
			margin-top: 10rpx;
			padding-top: 30rpx;
			padding-bottom: 40rpx;
			justify-content: space-between;
			.form-item-value-placeholder {
				flex: 1;
				color: #888;
				font-size: 13px;

				&.active {
					color: #000;
				}
			}
			.icon {
				width: 24rpx;
				height: 24rpx;
				margin-right: 20rpx;
				transition: all .3s;

				&.up {
					transform: rotateZ(180deg);
				}
			}
		}
	}

	.query-button {
		margin: 60rpx 0;
		// background-color: #04158c;
		background-color: #374486;
		color: #fff;
		padding: 20rpx 0;
		border-radius: 100px;
		font-size: 14px;
		text-align: center;
	}
	
</style>
